import { defineComponent, onMounted, onBeforeMount, reactive, ref, onUnmounted } from "vue";
import Card from "@/components/Card";

import "./style.less";

import { shebeishuFn, gongdanshuFn } from "./chart";
import Swiper from "swiper";

interface State {
  mySwiper?: Swiper;
  businessIntegrationMapTimer: any;
}

export default defineComponent({
  props: { flowCount: Number },
  setup(props) {
    const getImageUrl = (name: string) => {
      return new URL(
        `../../../assets/business-integration/${name}`,
        import.meta.url
      ).href;
    };
    const state = reactive<State>({
      businessIntegrationMapTimer: null
    });

    onBeforeMount(async () => {});

    const onPreview = () => {
      state.mySwiper?.slidePrev();
    };

    const onNext = () => {
      state.mySwiper?.slideNext();
    };

    onUnmounted(() => {
      clearInterval(state.businessIntegrationMapTimer);
    })

    const initData = () => {
      shebeishuFn();
    }

    onMounted(() => {
      shebeishuFn();
      setInterval(()=>{
        initData();
      },10000)
      state.mySwiper = new Swiper(".swiper", {
        direction: "horizontal",
      });
    });

    return () => {
      return (
        <div class="bi-center">
          <div class="siwper_box">
            <img
              class="left"
              src={getImageUrl("left.png")}
              alt=""
              onClick={onPreview}
            />
            <div class="swiper">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="container">
                    <div class="item">
                      <span class="label">当前实时流量数</span>
                      <div
                        class="value"
                        style={{ color: "rgba(0, 138, 255, 1)" }}
                      >
                        {props.flowCount}
                        <span>个</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <img
              class="right"
              src={getImageUrl("left.png")}
              alt=""
              onClick={onNext}
            />
          </div>

          <div class="canvas">
            <img class="dizuo" src={getImageUrl("dizuo.png")} alt="" />
            <img class="blink" src={getImageUrl("blink.png")} alt="" />
            <div class="item blue item1">流量</div>
            <div class="item blue item2">数据</div>
            <div class="item blue item3">监控</div>
            <div class="item item4">视界</div>
            <div class="item item5">智护</div>

            <div class="labels">
              <img src={getImageUrl("title.png")} alt="" />
            </div>

            <div class="center_imgs">
              <div class="img_item">
                <img src={getImageUrl("icon-1.png")} alt="" />
                <span>流量监控智能</span>
              </div>
              <div class="img_item">
                <img src={getImageUrl("icon-2.png")} alt="" />
                <span>数据可视化分析</span>
              </div>
              <div class="img_item">
                <img src={getImageUrl("icon-3.png")} alt="" />
                <span>网络安全流量图</span>
              </div>
              <div class="img_item">
                <img src={getImageUrl("icon-4.png")} alt="" />
                <span>智能流量管理器</span>
              </div>
              <div class="img_item">
                <img src={getImageUrl("icon-5.png")} alt="" />
                <span>视界流量分析仪</span>
              </div>
            </div>
          </div>

          <Card title="数据字节数变化" class="card">
            <div class="chart" id="shebeishu" style="height:100%;width:100%"></div>
          </Card>
        </div>
      );
    };
  },
});
